
import { useState, useEffect } from 'react'
import './index.scss'

function Circle (props) {
    const r = props.r ? Number(props.r) : 10 // 圆的半径
    const borderR = props.borderR ? Number(props.borderR) : 2 // 圆边框宽度
    const color = props.borderR ? props.borderR : '#e5473c' // 进度条颜色
    const [stroke, setStroke] = useState('')
    const strokeChange = () => {
        const num = props.value ? props.value : 0
        setStroke(`${num / 100 * 2 * Math.PI * r}  ${2 * Math.PI * r}`)
    }
    useEffect(() => {
        console.log(props)
    }, [])
    useEffect(() => {
        strokeChange()
    }, [props])
    return (<div className="component-Circle" style={{ width: 2*r + borderR*2, height: 2*r + borderR*2}}>
        <svg id="path1" width={2*r + borderR*2 } height={2*r + borderR*2 }>
                <circle
                    cx={r + borderR }
                    cy={r + borderR }
                    r={r}
                    strokeWidth={borderR}
                    stroke="#E5E5E5"
                    fill="none">
                </circle>
                <circle
                    cx={r + borderR }
                    cy={r + borderR }
                    r={r}
                    strokeWidth={borderR}
                    stroke={color}
                    fill="none"
                    transform={`rotate(-90, ${r + borderR}, ${r + borderR})`}
                strokeDasharray={stroke}
                >
                </circle>
            </svg>
            {props.children}
    </div>
            
            )
}


export default Circle
// transform="rotate(-90, 20, 20)"